<template>
  <div class="image-question-input-page">
    <!-- 左侧树形面板 -->
    <div class="tree-panel-wrapper" :style="{ flex: treePanelFlex }">
      <TreePanel class="tree-panel" />
    </div>
    
    <!-- 可拖动分隔条 -->
    <div class="resizer" @mousedown="initDrag"></div>
    
    <!-- 右侧上传面板 -->
    <div class="right-panel" :style="{ flex: uploadPanelFlex }">
      <div class="panel-header">
        <h3>题目上传与管理</h3>
      </div>
      <UploadPanel />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import TreePanel from '@/components/ImageQuestionInputPage/TreePanel.vue'
import UploadPanel from '@/components/ImageQuestionInputPage/UploadPanel.vue'

// 控制面板比例的响应式变量
const treePanelFlex = ref(1)
const uploadPanelFlex = ref(3)

// 初始化拖动
const initDrag = (e) => {
  e.preventDefault()
  const startX = e.clientX
  const startTreeFlex = treePanelFlex.value
  const startUploadFlex = uploadPanelFlex.value
  
  // 添加全局事件监听器
  const doDrag = (e) => {
    const container = document.querySelector('.image-question-input-page')
    const containerWidth = container.offsetWidth
    const dx = e.clientX - startX
    
    // 计算新的flex值
    const totalFlex = startTreeFlex + startUploadFlex
    const treeFlexRatio = startTreeFlex / totalFlex
    const uploadFlexRatio = startUploadFlex / totalFlex
    
    // 根据鼠标移动距离调整flex值
    const flexChange = (dx / containerWidth) * totalFlex
    treePanelFlex.value = Math.max(0.5, startTreeFlex + flexChange)
    uploadPanelFlex.value = Math.max(1, startUploadFlex - flexChange)
  }
  
  const stopDrag = () => {
    document.removeEventListener('mousemove', doDrag)
    document.removeEventListener('mouseup', stopDrag)
  }
  
  document.addEventListener('mousemove', doDrag)
  document.addEventListener('mouseup', stopDrag)
}
</script>

<style scoped>
.image-question-input-page {
  display: flex;
  height: 100%;
  min-height: calc(100vh - var(--menu-height, 54px));
  padding: 1px;
  gap: 1px;
  background: #FFFFFF;
}

.tree-panel-wrapper { 
  min-width: 20%;/** 树形页面站的范围 */
  max-width: 80%;
  display: flex;
  flex-direction: column;
}

.tree-panel {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel-header h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin: 15px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.right-panel {
  min-width: 20%;
  background: white;
  border-radius: 8px;
  padding: 0 15px 15px 15px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.resizer {
  width: 2px;
  background: #ddd;
  cursor: col-resize;
  border-radius: 1px;
  transition: background 0.3s;
}

.resizer:hover {
  background: #409eff;
}

@media (max-width: 1200px) {
  .image-question-input-page {
    flex-direction: column;
    height: auto;
    min-height: auto;
    padding: 10px;
  }
  
  .tree-panel-wrapper,
  .tree-panel {
    min-width: 100%;
    max-width: 100%;
  }
  
  .tree-panel-wrapper {
    order: 2;
    margin-top: 15px;
  }
  
  .right-panel {
    order: 1;
    padding: 0 10px 10px 10px;
  }
  
  .image-question-input-page {
    gap: 10px;
  }
  
  .resizer {
    display: none;
  }
}

@media (max-width: 768px) {
  .image-question-input-page {
    padding: 10px;
  }
}
</style>